<template>
    <div v-loading="loading">
        <iframe :src="config.src" class="frame w-100 h-100" :class="{ 'in-editor': inEditor }" @contextmenu="() => false" ref="frameRef" />
    </div>
</template>
<script setup>
import { onMounted } from "vue";

const { config } = defineProps({
    config: Object,
    inEditor: { type: Boolean, default: false },
});
const frameRef = ref();
const loading = ref(true);

onMounted(() => {
    frameRef.value.addEventListener("load", () => {
        loading.value = false;
    });
});
</script>

<style lang="scss" scoped>
.frame {
    border: none;
}

.in-editor {
    user-select: none;
    pointer-events: none;
}
</style>
